import React from './react';
import ReactDom from './react-dom';

/**
 * ref
 * ref允许我们访问DOM节点或者在React中创建组件实例
 * ref 字符串：组件this.refs = {key:value} key为字符串 值就是这个虚拟DOM在浏览器中的真实DOM
 *     函数： ref是一个函数
 *     对象：主流
 */

class Calculator extends React.Component { 
  constructor(props){
     super(props);
     this.a = React.createRef(); //{current:null}
     this.b = React.createRef();
     this.result = React.createRef();
  }
  handleAdd=()=>{
    let a = this.a.current.value;
    let b = this.b.current.value;
    this.result.current.value = parseFloat(a) + parseFloat(b);
  }

  render(){
    return <div>
     <input ref={this.a}/> + <input ref={this.b}/> <button onClick={this.handleAdd}>=</button>
      <input ref={this.result}/>
    </div> 
  }
} 
ReactDom.render(
  <Calculator/>,
  document.getElementById('root')
)
